<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="copyright" content="www.apicloud.com" />
    <link rel="stylesheet" href="../css/common.css">
    <script src="../script/api.js"></script>
    <style>
        html,body,header,section,footer,nav,div,ul,ol,li,img,a,span,em,del,center,strong,var,fieldset,form,label,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea{
            margin:0;
            border:0;
            padding:0;
        }
        html,body {
            -webkit-touch-callout:none;
            -webkit-text-size-adjust:none;
            -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
            -webkit-user-select:none;
        }
        header,footer,section,nav,img,a,button,em,del,strong,var,fieldset,label,cite,small,time,mark,code,figcaption,figure,textarea{
            display:block;
        }
        header,section,footer,nav {
            position:relative;
            overflow:hidden;
        }
        ol,ul{
            list-style:none;
        }
        input,button,textarea {
            border:0;
            margin:0;
            padding:0;
            font-size:1em;
            line-height:1em;
            -webkit-appearance:none;
            background-color:rgba(0, 0, 0, 0);
        }
        span{
            display:inline-block;
        }
        a,a:visited{
            text-decoration:none;
        }

        #header {
            background-color:#40aa53;
        }
        #nav{
            display:-webkit-box;
            height:44px;
        }
        #left {
            width:80px;
            color:#fff;
            background:url(../image/navbtn_back.png) no-repeat 14px 12px;
            -webkit-background-size:12px 20px;
        }
        #left>span {
            margin-top:13px;
            margin-left:36px;
            font-size:18px;
            height:18px;
            line-height:18px;
        }
        #middle {
            -webkit-box-flex:1;
            width:100%;
            display:-webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
        }
        #title {
        	font-size: 20px; height: 44px; margin: 0em; color: #fff;
            line-height:40px;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            text-align: center;
        }
        #right {
            width:80px;
        }
        section {
            -webkit-box-flex:1;
        }
    </style>
</head>
<body>
<div id="wrap">
    <header id='header'>
        <nav id="nav">
            <a id="left" onclick="closeWin();">
                <span>返回</span>
            </a>
            <div id="middle">
                <div id="title"></div>
            </div>
            <a id="right">
            </a>
        </nav>
    </header>
    <div id="main">
    </div>
</div>
</body>
<script>
    apiready = function() {
        var header = $api.byId('header');
        $api.fixIos7Bar(header);

        var headerPos = $api.offset(header);
        var pageParam = api.pageParam;
        if(pageParam.title){
        	$api.html($api.dom('#title'), pageParam.title);
        }
        api.openFrame({
            name: 'open_url',
            url: pageParam.url,
            rect:{
                x:0,
                y:headerPos.h,
                w:'auto',
                h:'auto'
            },
            bgColor: '#FFFFFF',
            showProgress: true,
            bounces: false
        });

    }

    function closeWin(){
        api.closeWin();
    }

</script>
</html>